<template>
  <div class="layui-fluid">
    <div class="layui-card">
      <div
        class="layui-form layui-card-header layuiadmin-card-header-auto"
        style="padding: 15px 15px 0px 15px"
      >
        <div class="layui-row">
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">模型</label>
              <div class="layui-input-block">
                <select lay-filter="change" lay-event="getModel">
                  <option value="">--请选择--</option>
                  <option
                    v-for="(ch, chIndex) in modelList"
                    :value="gernerateSelectValue(ch.key, ch.name)"
                  >
                    {{ ch.name }}
                  </option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">互斥类型</label>
              <div class="layui-input-block">
                <select lay-filter="change" lay-event="getType">
                  <option value="">--请选择--</option>
                  <option value="1">唯一流程</option>
                  <option value="2">参数</option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">对比参数</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="repel.constrastParams"
                  maxlength="200"
                  placeholder="请输入对比参数"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label" style="padding: 0"
                ><button class="layui-btn" v-on:click="saveRepelProcess">
                  <i
                    class="layui-icon layui-icon-search layuiadmin-button-btn"
                  ></i
                  >添加
                </button></label
              >
            </div>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <table id="dataTable"></table>
      </div>
    </div>
    <div id="barDemo" style="display: none">
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
        >删除</a
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "RepelProcess",
  data: function () {
    return {
      cols: [
        [
          {
            type: "checkbox",
            field: "id",
            align: "center",
          },
          {
            title: "互斥流程标识",
            field: "repelModelKey",
            align: "center",
          },
          {
            title: "互斥流程名称",
            field: "repelModelName",
            align: "center",
          },
          {
            title: "互斥类型",
            field: "repelType",
            align: "center",
            templet: function (res) {
              switch (res.repelType) {
                case "1":
                  return "<div>唯一流程</div>";
                case "2":
                  return "<div>参数</div>";
                default:
                  return "<div>未知类型</div>";
              }
            },
          },
          {
            title: "互斥流程对比参数",
            field: "constrastParams",
            align: "center",
          },
          {
            fixed: "right",
            title: "操作",
            align: "center",
            toolbar: "#barDemo",
          },
        ],
      ],
      repel: {},
      modelList: "",
    };
  },
  mounted: function () {
    this.initLayui();
    this.repel.modelKey = this.$route.query.modelKey;
    this.render();
  },
  methods: {
    queryRepelData: function (where) {
      var that = this;
      if (this.checkIsNull(where)) {
        where = {
          modelKey: this.repel.modelKey,
        };
      }
      var obj = {};
      obj.url = this.activitiModel + "/repelProcess";
      obj.cols = this.cols;
      obj.tableId = "dataTable";
      obj.where = where;
      obj.page = false;
      obj.parseData = function (res) {
        var newData = {};
        if (res.code == "000000") {
          newData.code = 0;
          if (that.checkIsNull(res.result)) {
            newData.data = [];
            newData.count = 0;
          } else {
            newData.data = res.result;
            newData.count = res.result.length;
          }
        } else {
          newData.code = 1;
          newData.msg = res.msg;
          newData.data = [];
          newData.count = 0;
        }
        return newData;
      };
      this.renderTable(obj); //其中url tableId以及cols为必传其他参数个性化参数请参考layui数据表格
    },
    queryAllNotRepelModelData: function () {
      var that = this;
      this.post(
        this.activitiModel + "/queryAllNotRepelModel",
        {
          modelKey: this.repel.modelKey,
        },
        function (data) {
          console.log(data);
          if (data.code != "000000") {
            that.showMsg(data.msg, false);
          } else {
            that.modelList = data.result;
          }
        }
      );
    },
    getModel: function (data, e) {
      this.repel.repelModelKey = data.split(":")[0];
      this.repel.repelModelName = data.split(":")[1];
    },
    getType: function (data, e) {
      this.repel.repelType = data;
    },
    saveRepelProcess: function () {
      var that = this;
      if (that.checkIsNull(that.repel.modelKey)) {
        that.showMsg("数据格式有误，请关闭页面重新进入");
        return false;
      }
      if (
        that.checkIsNull(that.repel.repelModelKey) ||
        that.checkIsNull(that.repel.repelModelName)
      ) {
        that.showMsg("请选择模型");
        return false;
      }
      if (that.checkIsNull(that.repel.repelType)) {
        that.showMsg("请选择互斥类型");
        return false;
      }
      if (that.repel.repelType == "2") {
        if (that.checkIsNull(that.repel.constrastParams)) {
          that.showMsg("请输入对比参数");
          return false;
        }
      }
      $.post(
        that.activitiModel + "/saveRepelProcess",
        that.repel,
        function (data) {
          if (data.code != "000000") {
            that.showMsg(data.msg);
          } else {
            that.render();
          }
        }
      );
    },
    gernerateSelectValue: function (value, name) {
      return value + ":" + name;
    },
    render: function () {
      this.queryRepelData();
      this.queryAllNotRepelModelData();
      this.repel = {
        modelKey: this.repel.modelKey,
      };
    },
  },
  updated: function () {
    this.initLayui();
  },
};
</script>